<template>
  <el-table-column v-bind="curColConfig" v-if="curColConfig.renderCell">
    <template slot-scope="scope">
      <ExSlot :renderCell="curColConfig.renderCell" :scope="scope"></ExSlot>
    </template>
  </el-table-column>
  <el-table-column v-bind="curColConfig" v-else-if="curColConfig.type === 'operation_view'" @click.stop.prevent>
    <template slot-scope="scope">
      <template v-for="btn in curColConfig.btns">
        <el-popconfirm
          class="el-popconfirm-btn"
          title="确定要删除这条记录？"
          v-if="btn.key === 'delete'"
          :key="btn.key"
          v-show="btn.visible(scope.row)"
          @onConfirm="handleBtnClick(btn.key, scope.row, scope.$index)"
        >
          <el-button slot="reference" :disabled="btn.disabled(scope.row)" v-bind="btn">{{ btn.label }}</el-button>
        </el-popconfirm>
        <el-button
          v-else
          v-show="btn.visible(scope.row)"
          :disabled="btn.disabled(scope.row)"
          :key="btn.key"
          v-bind="btn"
          @click.stop="handleBtnClick(btn.key, scope.row, scope.$index)"
          :style="{ color: btnColor(curColConfig, btn, scope.row) }"
          >{{ btnName(curColConfig, btn, scope.row) }}</el-button
        >
      </template>
    </template>
  </el-table-column>
  <el-table-column
    v-bind="curColConfig"
    v-else-if="curColConfig.type === 'operation' && isAddBtnShow()"
    @click.stop.prevent
  >
    <template slot-scope="scope">
      <template v-for="btn in curColConfig.btns">
        <el-popconfirm
          class="el-popconfirm-btn"
          title="确定要删除这条记录？"
          v-if="btn.key === 'delete'"
          :key="btn.key"
          v-show="btn.visible(scope.row)"
          @onConfirm="handleBtnClick(btn.key, scope.row, scope.$index)"
        >
          <el-button slot="reference" :disabled="btn.disabled(scope.row)" v-bind="btn">{{ btn.label }}</el-button>
        </el-popconfirm>
        <el-button
          v-else
          v-show="btn.visible(scope.row)"
          :disabled="btn.disabled(scope.row)"
          :key="btn.key"
          v-bind="btn"
          @click.stop="handleBtnClick(btn.key, scope.row, scope.$index)"
          :style="{ color: btnColor(curColConfig, btn, scope.row) }"
          >{{ btnName(curColConfig, btn, scope.row) }}</el-button
        >
      </template>
    </template>
  </el-table-column>
  <el-table-column v-bind="curColConfig" v-else-if="curColConfig.icon">
    <template slot-scope="scope">
      <i :class="curColConfig.icon"></i>
      <span style="margin-left: 5px">{{ scope.row[curColConfig.prop] }}</span>
    </template>
  </el-table-column>
  <el-table-column v-bind="curColConfig" v-else-if="curColConfig.children">
    <template v-for="childConfig in curColConfig.children">
      <VCol :colConfig="childConfig" :key="childConfig._uid"></VCol>
    </template>
  </el-table-column>
  <el-table-column v-bind="curColConfig" v-else></el-table-column>
</template>

<script>
import ExSlot from './ExSlot';
import { btnAuth } from '@/utils/auth';

export default {
  name: 'VCol',
  components: {
    ExSlot,
  },
  props: {
    colConfig: {
      type: Object,
      required: true,
    },
  },
  computed: {
    curColConfig() {
      const { colConfig } = this;
      if (colConfig.btns) {
        colConfig.btns = colConfig.btns.map(item => {
          item.visible = typeof item.visible === 'function' ? item.visible : () => item.visible !== false;
          item.disabled = typeof item.disabled === 'function' ? item.disabled : () => item.disabled === true;
          return {
            size: 'small',
            type: 'text',
            ...item,
          };
        });
      }

      return { ...colConfig };
    },
  },
  methods: {
    isAddBtnShow() {
      return btnAuth();
    },
    handleBtnClick(key, row, rowIndex) {
      this.$emit('handleBtnClick', key, row, rowIndex);
    },
    btnName(curColConfig, btn, row) {
      if (curColConfig.filter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.filter[row[curColConfig.prop]];
        } else {
          return curColConfig.filter['default'];
        }
      } else {
        return btn.label;
      }
    },
    btnColor(curColConfig, btn, row) {
      if (curColConfig.colorFilter) {
        if (![undefined, null].includes(row[curColConfig.prop])) {
          return curColConfig.colorFilter[row[curColConfig.prop]];
        } else {
          return curColConfig.colorFilter['default'];
        }
      } else {
        return '#46a6ff';
      }
    },
  },
};
</script>

<style lang="scss"></style>
